<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ColorPicker 颜色选择器 | vform-element</title>
    <meta name="description" content="基于 Vue3 和 Element-plus 的动态表单组件">
    <link rel="stylesheet" href="/vform-element/assets/style.d788119a.css">
    <link rel="modulepreload" href="/vform-element/assets/chunks/framework.63bebe7e.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/_commonjsHelpers.ba691886.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/chat-round.0845d834.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/config-provider2.da89bd12.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/builder.040a1dc4.js">
    <link rel="modulepreload" href="/vform-element/assets/api_color-picker.md.5b629c8a.lean.js">
    <link rel="modulepreload" href="/vform-element/assets/app.361feb9c.js">
    
    <meta name="twitter:title" content="ColorPicker 颜色选择器 | vform-element">
  <meta property="og:title" content="ColorPicker 颜色选择器 | vform-element">
  </head>
  <body>
    <div id="app"><!--[--><!--[--><div class="theme"><header class="nav-bar" data-v-29dab36d><div class="nav-bar-wrapper" data-v-29dab36d><div class="sidebar-button" data-v-29dab36d><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vform-element/" aria-label="vform-element, back to home" data-v-29dab36d data-v-fcdf2a90><!----> vform-element</a><div class="flex-grow" data-v-29dab36d></div><div class="nav" data-v-29dab36d><nav class="nav-links" data-v-29dab36d data-v-68d46b9e><!--[--><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/" data-v-7e0eb2fd>首页 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/guide/get-start.html" data-v-7e0eb2fd>指南 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item active" href="/vform-element/api/form.html" data-v-7e0eb2fd>配置 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item isExternal" href="https://github.com/foolishchow/vform" target="_blank" rel="noopener noreferrer" data-v-7e0eb2fd>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7e0eb2fd><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></div></header><aside class="sidebar" data-v-018e9cb6><nav class="nav-links nav" data-v-018e9cb6 data-v-68d46b9e><!--[--><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/" data-v-7e0eb2fd>首页 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/guide/get-start.html" data-v-7e0eb2fd>指南 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item active" href="/vform-element/api/form.html" data-v-7e0eb2fd>配置 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item isExternal" href="https://github.com/foolishchow/vform" target="_blank" rel="noopener noreferrer" data-v-7e0eb2fd>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7e0eb2fd><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-018e9cb6><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/form.html">表单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/form-item.html">表单元素</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">Element元素</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/cascader.html">Cascader 级联选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/checkbox-group.html">CheckboxGroup 多选框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/vform-element/api/color-picker.html">ColorPicker 颜色选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/date-picker.html">DatePicker 日期选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/date-time-picker.html">DateTimePicker 日期时间选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/input.html">Input 输入框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/autocomplete.html">Autocomplete 自动补全</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/input-number.html">InputNumber 数字输入框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/radio-group.html">RadioGroup 单选框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/rate">Rate 评分</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/select">Select 选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/select-v2">Select V2 虚拟列表选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/slider">Slider 滑块</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/switch">Switch 开关</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/time-picker">TimePicker 时间选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/time-select">TimeSelect 时间选择</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/transfer">Transfer 穿梭框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/upload">Upload 上传</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7b60a085><div class="page-left" data-v-7b60a085></div><div class="container" data-v-7b60a085><!--[--><!--]--><div style="position:relative;" class="content" data-v-7b60a085><div><h1 id="colorpicker-颜色选择器" tabindex="-1">ColorPicker 颜色选择器 <a class="header-anchor" href="#colorpicker-颜色选择器" aria-hidden="true">#</a></h1><p>用于颜色选择，支持多种格式。</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-hidden="true">#</a></h2><!----><h2 id="配置选项" tabindex="-1">配置选项 <a class="header-anchor" href="#配置选项" aria-hidden="true">#</a></h2><p><code>ColorPicker</code> 完全继承了 <code>ElColorPicker</code>的属性 您可以从下面的链接里找到相关文档</p><ul><li><a href="https://element-plus.org/zh-CN/component/color-picker.html" target="_blank" rel="noopener noreferrer">Element ElColorPicker </a></li><li><a href="https://element-plus.org/zh-CN/component/color-picker.html#%E5%B1%9E%E6%80%A7" target="_blank" rel="noopener noreferrer">Element ElColorPicker 的属性</a></li></ul><h2 id="typescript声明" tabindex="-1"><code>typescript</code>声明 <a class="header-anchor" href="#typescript声明" aria-hidden="true">#</a></h2><div class="language-typescript line-numbers-mode"><pre><code><span class="token keyword">type</span> <span class="token class-name">VColorPickerProps</span> <span class="token operator">=</span> VueProps<span class="token operator">&lt;</span><span class="token keyword">typeof</span> ElColorPicker<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">VColorPickerItem<span class="token operator">&lt;</span>
  <span class="token constant">T</span> <span class="token keyword">extends</span> object<span class="token punctuation">,</span> 
  Key <span class="token keyword">extends</span> DeepKey<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> DeepKey<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
<span class="token operator">&gt;</span></span> <span class="token keyword">extends</span> <span class="token class-name">VBaseItem<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> Key<span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/**
   * 类型 ColorPicker
   */</span>
  props<span class="token operator">?</span><span class="token operator">:</span> VPropDef<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> VColorPickerProps<span class="token operator">&gt;</span>
  <span class="token comment">/**
   * 数据转换
   */</span>
  transfer<span class="token operator">?</span><span class="token operator">:</span> VTransfer<span class="token operator">&lt;</span>Into<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> Key<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></div></div><footer class="page-footer" data-v-7b60a085 data-v-4b340945><div class="edit" data-v-4b340945><div class="edit-link" data-v-4b340945 data-v-b84fa0d0><!----></div></div><div class="updated" data-v-4b340945><!----></div></footer><div class="next-and-prev-link" data-v-7b60a085 data-v-6851b17c><div class="container" data-v-6851b17c><div class="prev" data-v-6851b17c><a class="link" href="/vform-element/api/checkbox-group" data-v-6851b17c><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-6851b17c><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-6851b17c>CheckboxGroup 多选框</span></a></div><div class="next" data-v-6851b17c><a class="link" href="/vform-element/api/date-picker" data-v-6851b17c><span class="text" data-v-6851b17c>DatePicker 日期选择器</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-6851b17c><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div><!----></main></div><!----><!--]--><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_autocomplete.md\":\"d38ba630\",\"api_cascader.md\":\"19457b39\",\"api_checkbox-group.md\":\"aa4f1ba9\",\"api_color-picker.md\":\"5b629c8a\",\"api_date-picker.md\":\"88da5445\",\"api_date-time-picker.md\":\"0697ffae\",\"api_form-item.md\":\"976bc258\",\"api_form.md\":\"ea45ab81\",\"api_input-number.md\":\"a1c0ffe4\",\"api_input.md\":\"36121401\",\"api_radio-group.md\":\"4d20f5c2\",\"api_rate.md\":\"ac385ba6\",\"api_select-v2.md\":\"1454d42a\",\"api_select.md\":\"7cc174f5\",\"api_slider.md\":\"c13c55ce\",\"api_switch.md\":\"eda4ad4d\",\"api_time-picker.md\":\"c9d01cac\",\"api_time-select.md\":\"81635e6f\",\"api_transfer.md\":\"73f5a58d\",\"api_upload.md\":\"3f1d8a0e\",\"guide_custom-render.md\":\"5f5a4fde\",\"guide_get-start.md\":\"1c5502f9\",\"guide_how.md\":\"62e7e9ca\",\"guide_why.md\":\"1126621f\",\"index.md\":\"cfdf7747\"}")</script>
    <script type="module" async src="/vform-element/assets/app.361feb9c.js"></script>
    
  </body>
</html>